<template>
  <div class="word_block_wrapper">
    <div class="word_block_inner">
      <el-button @click="$emit('getwordlist')">刷新数据</el-button>

      <div class="block_main_wrapper">
        <div class="block_main_inner">
          <div class="show_tgt_wrapper" style="margin-top: 30px;">
            <el-switch style="display: block" v-model="show_tgt" active-color="#13ce66" inactive-color="#ff4949"
                       active-text="显示翻译"
                       inactive-text="隐藏翻译">
            </el-switch>
          </div>
          <div class="num_wrapper" style="margin-top: 30px;">
            <div class="num_inner">
              {{word_list.length>0?(cur_index+1):0}}/{{word_list.length}}
            </div>
          </div>

          <div class="src_wrapper" style="line-height: 100px;font-size: 50px;font-weight: bold;">
            {{word.src}}
          </div>
          <div class="tgt_wrapper" v-show="show_tgt" @click="show_tgt = false">
            {{word.tgt}}
          </div>
          <div class="tgt_wrapper" v-show="!show_tgt" @click="show_tgt = true">
            点击显示翻译
          </div>
          <div class="btn_wrapper" style="margin-top: 30px;">
            <el-button type="danger" icon="el-icon-delete" circle @click="no"></el-button>
            <el-button type="success" icon="el-icon-check" circle @click="yes"></el-button>
          </div>

        </div>
      </div>


    </div>
  </div>
</template>

<script>
    export default {
      name: "WordBlock",
      props:['word_list'],
      data(){
        return{
          cur_index: 0,
          show_tgt: true,
          word: {
            id: 0,
            src: 'null',
            tgt: 'null',
            cmd: '保留',
            imp: '保留'
          }
        }
      },
      mounted() {
        console.debug("word-block mount")
        if (this.word_list.length > 0){
          this.word = this.word_list[this.cur_index]
        }
      },
      methods: {
        no(){
          this.cur_index = (this.cur_index+1)%this.word_list.length
        },
        yes(){
          if (this.word_list.length>1){
            if (this.cur_index == this.word_list.length-1){
              this.cur_index--
              this.word_list.splice(this.cur_index+1, 1)
            }else{
              this.word_list.splice(this.cur_index, 1)
            }
          }
        }//yes end
      },//methods end
      watch: {
        cur_index(newv, oldv){
          this.word = this.word_list[newv]
        },
        'word_list.length'(newv, oldv){
          if ((newv>0)){
            console.debug("word_list.length change:")
            this.word = this.word_list[this.cur_index]
          }
        }
      }
    }
</script>

<style scoped>
  .tgt_wrapper{
    line-height: 80px;font-size: 25px;
  }
</style>
